<script setup lang="ts">
import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
import 'vue-waterfall-plugin-next/dist/style.css'
import { vElementHover } from '@vueuse/components'
import type { MasonryList, CarouselList } from './type'

interface Props {
  list: MasonryList[]
  carouseList?: CarouselList[]
}

const props = withDefaults(defineProps<Props>(), {})

const options = reactive({
  animationCancel: true,
  // 唯一key值
  rowKey: 'id',
  // 卡片之间的间隙
  gutter: 12,
  // 是否有周围的gutter
  hasAroundGutter: true,
  // 卡片在PC上的宽度
  width: 290,
  // 自定义行显示个数，主要用于对移动端的适配
  breakpoints: {
    1200: {
      // 当屏幕宽度小于等于1200
      rowPerView: 4
    },
    800: {
      // 当屏幕宽度小于等于800
      rowPerView: 3
    },
    500: {
      // 当屏幕宽度小于等于500
      rowPerView: 2
    }
  },
  // 动画效果
  // animationEffect: 'animate__fadeInUp',
  // 动画时间
  animationDuration: 1000,
  // 动画延迟
  animationDelay: 300,
  // 背景色
  backgroundColor: '#131313',
  // imgSelector
  imgSelector: 'src',
  // 加载配置
  // loadProps: {
  //   loading,
  //   error,
  // },
  // 是否懒加载
  lazyload: false,
  crossOrigin: true,
  delay: 0,
  horizontalOrder: false
})

const waterfallInstance = useTemplateRef('waterfallRef')

const useCarsousel = computed(() => {
  console.log('props.carouseList', props.carouseList)
  return !!props.carouseList?.length
})

const colWidth = ref(options.width)

const emptySpaceStyle = computed(() => {
  return {
    width: `${colWidth.value}px`,
    height: carouselStyle.value.height
  }
})

const carouselStyle = computed(() => {
  const width = colWidth.value * 2 + options.gutter
  return {
    width: `${width}px`,
    height: `${(240 * width) / 592}px`
  }
})

const afterRender = () => {
  // console.log('afterRender', waterfallInstance.value?.colWidth)
  colWidth.value = waterfallInstance.value?.colWidth ?? options.width
}

const masonryContainer = useTemplateRef('containerRef')

useResizeObserver(masonryContainer, entries => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  console.log('entries', width, height)
  waterfallInstance.value?.renderer()
})

const onHoverCard = (_: boolean) => {
  // console.log(1111111111111, state)
  waterfallInstance.value?.renderer()
}
</script>

<template>
  <div
    ref="containerRef"
    class="masonry-container"
  >
    <ClientOnly>
      <Waterfall
        ref="waterfallRef"
        v-bind="options"
        :list="list"
        @afterRender="afterRender"
      >
        <template #default="{ item, url, index }">
          <div
            v-if="useCarsousel && (index === 0 || index === 1)"
            class="item empty-space"
            :style="emptySpaceStyle"
          >
            <div
              v-if="index === 0"
              class="carousel-container"
              :style="carouselStyle"
            >
              <el-carousel :height="carouselStyle.height">
                <el-carousel-item
                  v-for="carouse in carouseList"
                  :key="carouse.id"
                  class="carousel-item"
                >
                  <img
                    alt=""
                    :src="carouse.src"
                  />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <div
            v-else
            ref="cardRef"
            v-element-hover="[onHoverCard, { delayEnter: 500 }]"
            class="item card"
          >
            <LazyImg :url="url" />
            <!-- <img
              alt=""
              :src="url"
            /> -->
            <p class="text">内容{{ item.id }}</p>
            <div>{{ index }}</div>
            <div class="content">
              金坷垃时间到了咖啡机阿吉山卡拉登记发卡机索拉卡的反击啊手机打卡拉季反垃圾
            </div>
          </div>
        </template>
      </Waterfall>
    </ClientOnly>
  </div>
</template>

<style lang="less" scoped>
.masonry-container {
  :deep(.waterfall-list) {
    .waterfall-item {
      &:first-child {
        z-index: 9;
      }
    }
  }

  .item {
    background-color: #fff;
    border-radius: 4px;
  }

  .empty-space {
    .carousel-container {
      overflow: hidden;
      color: #000;
      background-color: aqua;
      border-radius: 4px;

      :deep(.el-carousel__indicators) {
        bottom: 2px;
        right: 16px;
        left: auto;
        transform: none;

        .el-carousel__indicator {
          &.is-active {
            .el-carousel__button {
              background-color: #fff;
            }
          }

          .el-carousel__button {
            width: 5px;
            height: 5px;
            background: rgb(255 255 255 / 25%);
            box-shadow: 0 5.4px 13.5px 0 rgb(0 0 0 / 30%);
          }
        }
      }

      .carousel-item {
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }
  }

  .card {
    display: flex;
    overflow: hidden;
    color: #000;
    flex-direction: column;

    .text {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
    }

    &:hover {
      .content {
        animation: show-content 0.4s forwards;
      }
    }

    @keyframes show-content {
      0% {
        height: 0;
      }

      99% {
        height: 0;
      }

      100% {
        height: 100px;
      }
    }

    .content {
      // display: none;
      height: 0;
      background-color: aqua;
    }
  }
}
</style>
